<template>
  <div class="footer">
    <el-row :gutter="20">
      <el-col :span="14" :offset="5">
        <div class="grid-content bg-purple">
          <el-row :gutter="20">
            <el-col :span="6">
              <!-- 左侧按键 -->
              <div class="grid-content bg-purple">
                <el-button
                  icon="el-icon-caret-left"
                  circle
                  @click="lastMusic"
                ></el-button>
                <el-button
                  :icon="musicPlay"
                  circle
                  @click="musicPlayBtn"
                ></el-button>
                <el-button
                  icon="el-icon-caret-right"
                  circle
                  @click="nextMusic"
                ></el-button>
              </div>
            </el-col>
            <el-col :span="12" style="overflow: hidden">
              <div class="grid-content bg-purple">
                <!-- 中间进度条 -->
                <div class="block">
                  <el-slider v-model="musicProcess"></el-slider>
                  <span ref="playtime" style="display: none"
                    >{{ gotimeMin }}:{{ gotimeSec }}/{{ alltime }}</span
                  >
                  <span>{{ songdetail }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <!-- 右侧音量和歌单按钮 -->
              <div class="grid-content bg-purple Voice">
                <div
                  @mouseenter="showVoiceControl"
                  @mouseleave="hideVoiceControl"
                >
                  <div class="changeVoiceDiv">
                    <el-slider
                      id="changeVoice"
                      v-model="VoiceLoud"
                      vertical
                      height="100px"
                      v-if="VoiceControl"
                    ></el-slider>
                  </div>
                  <el-button
                    :icon="voiceBtn"
                    circle
                    @click="closeVoice"
                  ></el-button>
                </div>
              </div>
              <el-button
                icon="el-icon-tickets"
                class="musicList"
                @click="getUserList"
                >歌单</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <audio controls id="audio" ref="puturl" class="audiofoot"></audio>
  </div>
</template>

<script>
import { getUserIfo } from "../../api/user";
export default {
  data() {
    return {
      // 音乐播放进程
      musicProcess: 0,
      musicProcessCoefficient: 0,
      pauseORplay: 0,
      musicPlay: "el-icon-video-play",
      //   voice组件控制
      VoiceLoud: 100,
      originalLoud: 100,
      closeORloud: 0,
      VoiceControl: false,
      voiceBtn: "el-icon-bell",
      Playurl: "",
      alltime: "",
      gotimeMin: "0",
      gotimeSec: "0",
      playalltime: 0,
      timeInterval: "",
      songdetail: "",
    };
  },
  computed: {},
  watch: {
    //   监听音量大小改变图标
    VoiceLoud: function () {
      if (this.VoiceLoud == 0) {
        this.voiceBtn = "el-icon-close-notification";
      } else {
        this.voiceBtn = "el-icon-bell";
        // 暂存音乐音量
        this.originalLoud = this.VoiceLoud;
      }
    },
    "$store.state.play.playurl": function () {
      this.gotimeMin = "0";
      this.gotimeSec = "0";
      this.playalltime = 0;
      this.musicProcess = 0;
      clearInterval(this.timeInterval);
      this.playmusic();
    },
    "$store.state.play.alltime": function () {
      this.playmusic1();
    },
  },

  methods: {
    init() {
      // 防止监控报错
      this.$store.commit("play/playurl", "");
    },
    // vux获取歌曲信息
    playmusic() {
      this.$refs.puturl.src = this.$store.state.play.playurl;
      // 重置状态
      this.musicPlay = "el-icon-video-play";
      this.pauseORplay = 0;
    },
    playmusic1() {
      // 展示信息
      this.songdetail =
        this.$store.state.play.song + "   " + this.$store.state.play.singer;
      let timeall = this.$store.state.play.alltime;
      this.musicProcessCoefficient = timeall / 100;
      let min = parseInt(timeall / 1000 / 60);
      let sec = parseInt((timeall / 1000) % 60);
      this.alltime = `${min}:${sec}`;
      this.$refs.playtime.style.display = "block";
    },
    //   上一首
    lastMusic() {
      console.log(1);
    },
    // 下一首
    nextMusic() {
      console.log(1);
    },
    //   暂停或播放音乐
    musicPlayBtn() {
      // 需要一个判断url有的话才可以播放
      this.pauseORplay++;
      if (this.pauseORplay % 2 != 0) {
        this.musicPlay = "el-icon-video-pause";
        audio.play();
        this.$store.commit("play/getplaystate", "1");
        this.timeInterval = setInterval(() => {
          this.playalltime = this.playalltime + 1000;
          if (this.gotimeSec == 59) {
            this.gotimeMin++;
            this.gotimeSec = -1;
          }
          this.musicProcess = this.playalltime / this.musicProcessCoefficient;
          this.gotimeSec++;
          if (this.alltime == this.gotimeMin + ":" + this.gotimeSec) {
            this.musicPlay = "el-icon-video-play";
            clearInterval(this.timeInterval);
          }
        }, 1000);
      } else {
        this.musicPlay = "el-icon-video-play";
        audio.pause();
        clearInterval(this.timeInterval);
        this.$store.commit("play/getplaystate", "0");
      }
    },
    //关闭打开声音
    closeVoice() {
      this.closeORloud++;
      if (this.closeORloud % 2 != 0) {
        this.VoiceLoud = 0;
        this.voiceBtn = "el-icon-close-notification";
      } else {
        this.VoiceLoud = this.originalLoud;
        this.voiceBtn = "el-icon-bell";
      }
    },
    // 音量控制组件显示or隐藏
    showVoiceControl() {
      this.VoiceControl = true;
    },
    hideVoiceControl(i) {
      this.VoiceControl = false;
    },
    async getUserList() {
      const result = await getUserIfo();
      console.log(result);
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 60px;
}
.row-bg {
  background-color: #f9fafc;
}
.block {
  width: 100%;
  padding-left: 10px;
  position: relative;
}
.block span {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 5px;
  height: 20px;
  font-size: 18px;
  user-select: none;
}
.block span:nth-child(2) {
  width: 50px;
}
.Voice {
  width: 40px;
  float: left;
}
.changeVoiceDiv {
  padding-top: 50px;
  height: 100px;
  position: absolute;
  top: -155px;
  width: 40px;
}
button {
  font-size: 20px;
}
.audiofoot {
  position: absolute;
  top: 0;
  z-index: -1;
}
</style>
